import * as echarts from '../../ec-canvas/echarts'
const http = require('../../utils/http.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    index: 0, //选择年的下标
    indexTime: 0,
    ec: {
      lazyLoad: true
    },
    array: [],
    ninayue: http.transTime1(new Date().getTime() / 1000).substr(0,7),
    pageName: 1,
    date: http.transTime1(new Date().getTime() / 1000),
    defaultEt: http.transTime1(new Date().getTime() / 1000),
    time: {}, //处理后的时间数据
    resData: {}, //后端数据
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.echartsComponnet = this.selectComponent('#mychart');
    this.echartsComponnet1 = this.selectComponent('#mychart1');
    this.getRes('', 'week');
    let nian = 2020;
    let array = [];
    for(let i=0; i<= 50; i++) {
      array.push(nian+i+'年');
    }
    this.setData({
      array: array
    })
  },
  // 切换年
  bindPickerChange: function(e) {
    let time = this.data.time;
    time.year = {};
    time.year.year = this.data.array[e.detail.value].substr(0,4);
      time.year.month = '';
      time.year.day = '';
      this.getRes(time.year, 'year');
    this.setData({
      index: e.detail.value,
      time: time
    })
  },
  // 切换年月
  selectDataTime: function(e) {
    let time = this.data.time;
    time.month = {};
      time.month.year = e.detail.value[0] + e.detail.value[1] + e.detail.value[2] + e.detail.value[3];
      time.month.month = e.detail.value[5] + e.detail.value[6];
      time.month.day = '';
    this.getRes(time.month, 'month');
    this.setData({
      ninayue: e.detail.value,
      time: time
    })
  },
  // 切换上方的tab
  navbind(e) {
    let index = e.currentTarget.dataset.index;
    let time = this.data.time;
    if (index == 1) {
      this.getRes(time.week, 'week');
    }
    if (index == 2) {
      this.getRes(time.month, 'month');
    }
    if (index == 3) {
      this.getRes(time.year, 'year');
    }
    this.setData({
      pageName: index
    })
  },
  // 时间选择器
  bindDateChange: function (e) {
    let time = this.data.time;
      time.week = {};
      time.week.year = e.detail.value[0] + e.detail.value[1] + e.detail.value[2] + e.detail.value[3];
      time.week.month = e.detail.value[5] + e.detail.value[6];
      time.week.day = e.detail.value[8] + e.detail.value[9];
      this.getRes(time.week, 'week');
    this.setData({
      date: e.detail.value,
      time: time
    })
  },
  // 获取请求数据
  getRes(parameter, time) {
    let url = '';
    if (time == 'week') url = '/mini/v1/work/boss/daliy';
    if (time == 'month') url = '/mini/v1/work/boss/month';
    if (time == 'year') url = '/mini/v1/work/boss/year';
    parameter ? parameter : parameter = {};
    http.postRequest(url, parameter, res => {
      let resData = res.data;
      // 营收数据
      resData.revenue = {};
      resData.revenue.arr1 = [];
      resData.revenue.arr2 = [];
      resData.revenue.name = '营收额';
      let num = '';
      if (this.data.pageName == 1) num = '日';
      if (this.data.pageName == 2) num = '日';
      if (this.data.pageName == 3) num = '月';
      for (let i in res.data.statIncome) {
        resData.revenue.arr1.push(Number(res.data.statIncome[i].income));
        resData.revenue.arr2.push(res.data.statIncome[i].date + num);
      }
      // 汽车店增长客户统计
      resData.info = {};
      resData.info.arr1 = [];
      resData.info.arr2 = [];
      resData.info.name = '增长人数';
      for (let z in res.data.statOwner) {
        resData.info.arr1.push(Number(res.data.statOwner[z].number));
        resData.info.arr2.push(res.data.statOwner[z].date + num);
      }
      this.setData({
        resData: resData
      })
      this.init_echarts(resData.revenue);
      this.init_echarts1(resData.info);
    })
  },
  //营收线图调用
  init_echarts(data) {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption(data));
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  //增长客户线图调用
  init_echarts1(data) {
    this.echartsComponnet1.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption(data));
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  // 线图配置
  getOption(data) {
    // 指定图表的配置项和数据
    var option = {
      title: {
        left: 'center'
      },
      grid: {
        y2: 60,
        x: 50,
        x2: 40,
        y: 20
      },
      color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.arr2,
        axisLine: {
          onZero: true
        },
        axisLabel: {
          textStyle: {
            color: '#259BFF',
            fontSize: '12',
          }
        },
        axisLine: {
          lineStyle: {
            color: '#259BFF',
            width: 2
          }
        }
      },
      axisLabel: {
        color: '#FF6F26',
        formatter: function (value, index) {
          var value;
          if (value >= 1000) {
            value = parseInt(Number(value) / 1000) + 'k';
          } else if (value < 1000) {
            value = value;
          }
          return value;
        }
      },
      yAxis: [{
        type: 'value',
        interval: Math.max(...data.arr1) > 5 ? Math.max(...data.arr1) / 5 : 1,
        max: Math.max(...data.arr1) > 5 ? Math.max(...data.arr1) : 5,
        min: 0,
        axisLine: {
          lineStyle: {
            color: '#FF6F26',
            fontSize: '12',
            width: 2
          }
        }
      }],
      series: [{
        name: data.name,
        type: 'line',
        smooth: true,
        data: data.arr1,
        lineStyle: {
          color: "#FF6F26",
          fontSize: '12',
          width: 2
        }
      }],
      dataZoom: [{
        type: 'inside',
        show: true,
        height: '15',
        bottom: '3%'
      },{
        height: '20',
      }],
    }
    return option;
  }
})